// 文本编辑弹窗组件：显示富文本输入和确认/取消按钮，并提供背景色/边框设置
import React, { useState, useEffect } from 'react'
import { View, Textarea, Button } from '@tarojs/components'
import './TextEditorModal.less'

type TextStyle = {
  backgroundColor?: string
  borderType?: string
  borderColor?: string
  borders?: { top?: boolean; left?: boolean; right?: boolean; bottom?: boolean }
}

type Props = {
  visible: boolean
  value: string
  onChange: (v: string) => void
  onCancel: () => void
  onConfirm: (style?: TextStyle) => void
}

const COLOR_PRESETS = ['#ffffff', '#fff9c4', '#ffecb3', '#ffe0b2', '#ffc1e3', '#bbdefb', '#c8e6c9', '#eeeeee']

const TextEditorModal: React.FC<Props> = ({ visible, value, onChange, onCancel, onConfirm }) => {
  const [bgColor, setBgColor] = useState<string>('#ffffff')
  const [borderType, setBorderType] = useState<string>('solid')
  const [borderColor, setBorderColor] = useState<string>('#000000')
  const [borders, setBorders] = useState<{ top?: boolean; left?: boolean; right?: boolean; bottom?: boolean }>({ top: false, left: false, right: false, bottom: false })

  useEffect(() => {
    if (!visible) return
    setBgColor('#ffffff')
    setBorderType('solid')
    setBorderColor('#000000')
    setBorders({ top: false, left: false, right: false, bottom: false })
  }, [visible])

  if (!visible) return null

  const toggleBorder = (side: 'top' | 'left' | 'right' | 'bottom') => {
    setBorders(prev => ({ ...prev, [side]: !prev[side] }))
  }

  const handleConfirm = () => {
    const style: TextStyle = { backgroundColor: bgColor, borderType, borderColor, borders }
    onConfirm && onConfirm(style)
  }

  return (
    <View className='text-editor-modal'>
      <View className='text-editor-mask' onClick={onCancel}>
        <View
          className='text-editor'
          onClick={e => e.stopPropagation && e.stopPropagation()}
          onTouchStart={e => e.stopPropagation && e.stopPropagation()}
          onTouchMove={e => e.stopPropagation && e.stopPropagation()}
          onTouchEnd={e => e.stopPropagation && e.stopPropagation()}
          onTouchCancel={e => e.stopPropagation && e.stopPropagation()}
        >
          <Textarea value={value} onInput={(e: any) => onChange(e.detail.value)} placeholder='请输入富文本（支持简单换行）' />

          {/* 背景色选择 */}
          <View style={{ marginTop: 12 }}>
            <View style={{ marginBottom: 6 }}>背景色：</View>
            <View style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              {COLOR_PRESETS.map(c => (
                <View key={c} onClick={() => setBgColor(c)} style={{ width: 28, height: 28, borderRadius: 4, background: c, border: bgColor === c ? '2px solid #333' : '1px solid #ddd' }} />
              ))}
            </View>
          </View>

          {/* 边框选择 */}
          <View style={{ marginTop: 12 }}>
            <View style={{ marginBottom: 6 }}>边框：</View>
            <View style={{ display: 'flex', gap: 8, alignItems: 'center', marginBottom: 8 }}>
              <View onClick={() => toggleBorder('top')} style={{ padding: 6, borderRadius: 6, background: borders.top ? '#FF8C42' : 'transparent', color: borders.top ? '#fff' : '#333' }}>上</View>
              <View onClick={() => toggleBorder('left')} style={{ padding: 6, borderRadius: 6, background: borders.left ? '#FF8C42' : 'transparent' }}>左</View>
              <View onClick={() => toggleBorder('right')} style={{ padding: 6, borderRadius: 6, background: borders.right ? '#FF8C42' : 'transparent' }}>右</View>
              <View onClick={() => toggleBorder('bottom')} style={{ padding: 6, borderRadius: 6, background: borders.bottom ? '#FF8C42' : 'transparent' }}>下</View>
            </View>
            <View style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
              <View style={{ marginRight: 8 }}>线型：</View>
              <View onClick={() => setBorderType('solid')} style={{ padding: 6, borderRadius: 6, background: borderType === 'solid' ? '#ddd' : 'transparent' }}>实线</View>
              <View onClick={() => setBorderType('dashed')} style={{ padding: 6, borderRadius: 6, background: borderType === 'dashed' ? '#ddd' : 'transparent' }}>虚线</View>
              <View onClick={() => setBorderType('dotted')} style={{ padding: 6, borderRadius: 6, background: borderType === 'dotted' ? '#ddd' : 'transparent' }}>点线</View>
              <View style={{ marginLeft: 12 }}>颜色：</View>
              <View style={{ display: 'flex', gap: 6 }}>
                {COLOR_PRESETS.map(c => (
                  <View key={c} onClick={() => setBorderColor(c)} style={{ width: 20, height: 20, background: c, borderRadius: 3, border: borderColor === c ? '2px solid #333' : '1px solid #ccc' }} />
                ))}
              </View>
            </View>
          </View>

          <View style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 12 }}>
            <Button onClick={onCancel}>取消</Button>
            <Button onClick={handleConfirm} type='primary'>确认</Button>
          </View>
        </View>
      </View>
    </View>
  )
}

export default TextEditorModal


